<template>
    <view class="page">
        <!-- <NavBar title="个人中心"></NavBar> -->

        <view class="header">
            <view class="user">
                <navigator class="avatar" url="/pages/setting/setting" hover-class="none" open-type="navigate">
                    <uv-avatar :src="user.avatar" size="120rpx"></uv-avatar>
                </navigator>
                <view class="info" v-if="user.vipKind">
                    <view class="user-name">
                        <view class="user-name-text">{{ user.nickname }}</view>
                        <view class="vip">
                            <image src="@/static/images/icon_VIP.png" class="vip-icon" />
                        </view>
                    </view>
                    <view class="vip-time">vip到期：{{ user.vipEnd }}</view>
                </view>
                <navigator v-else class="user-name" url="/pages/setting/setting" hover-class="none"
                    open-type="navigate">
                    {{ user.nickname }}
                </navigator>


                <navigator v-if="!token" class="user-btn" url="/pages/login/login" hover-class="none"
                    open-type="navigate">登录
                </navigator>
                <navigator v-if="!token" class="user-btn" url="/pages/register/register" hover-class="none"
                    open-type="navigate">注册
                </navigator>

            </view>
            <navigator class="setting" url="/pages/setting/setting" hover-class="none" open-type="navigate">
                <image src="@/static/images/setting@2x.png" class="setting-img"></image>
            </navigator>
        </view>

        <view class="wallet">
            <view class="item">
                <view class="icon">
                    <image class="yundian" src="@/static/images/icon_yundian.png"></image>
                </view>
                <view class="quantity">云点:{{ user.balance || 0 }}</view>
            </view>
            <view class="item">
                <view class="icon">
                    <image class="jifen" src="@/static/images/icon_jifen.png"></image>
                </view>
                <view class="quantity">积分:{{ user.integral || 0 }}</view>
            </view>

            <navigator url="/pages/orderRecord/orderRecord" hover-class="none" open-type="navigate" class="record">购买记录
            </navigator>

        </view>

        <navigator url="/pages/recharge/recharge" hover-class="none" open-type="switchTab" class="work-btn-style btn">
            点击充值
        </navigator>

        <view class="my" v-if="token">
            <view class="title">我的作品</view>
            <view class="container">
                <view class="item" v-for="(item, i) in modelList" :key="item.id" @click="checkModel(item)">
                    <uv-image class="item-img" v-if="item.coverList" :src="item.coverList[0]" mode="aspectFill" lazyLoad
                        width="100%" height="100%" radius="10rpx">
                        <template v-slot:error>
                            <view style="font-size: 24rpx;">加载失败</view>
                        </template>
                    </uv-image>
                    <view class="tip" v-if="item.scaleType">{{ item.scaleType }}</view>
                </view>
                <view class="more">
                    <uv-load-more bgColor="#000" marginTop='0' marginBottom='0' height="40"
                        :status="hasMore ? 'loading' : 'noMore'" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';
import {
    onHide,
    onReachBottom,
    onPullDownRefresh
} from '@dcloudio/uni-app'

//pinia
import {
    storeToRefs
} from 'pinia'
import {
    useUserStore
} from "@/stores/useUserStore.js"

// 获取pinia的数据
const userStore = useUserStore()

// 从pinia的数据中结构出值并做响应式
const {
    user,
    token
} = storeToRefs(userStore)

//api

import {
    apiGetUserInfo
} from '@/api/authApi.js'
import {
    apiGetMyModel
} from '@/api/defaultApi.js'

// 充值套餐
const goods = ref([])
const index = ref(0)

const modelList = ref([])
const pageNo = ref(1)
const pageSize = ref(20)
// 是否还有更多
const hasMore = ref(true)


// 充值确认
const recharge = async () => {
    console.log(goods.value[index.value]);
    uni.showToast({
        title: "请复制网址，使用微信打开充值",
        icon: "none",
    })
}

// 获取用户信息
const getUserInfo = async () => {
    let res = await apiGetUserInfo()
    userStore.setUser(res.data)
}

// 获取我的模型
const getModelList = async () => {
    let res = await apiGetMyModel({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    })
    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false
    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)
}

defineExpose({
    getModelList,
    modelList //将需要调用的方法暴露在当前实例上
})

//选择套餐
const selectItem = (i) => {
    index.value = i
}

// 查看作品
const checkModel = (item) => {
    if (item.coverList && item.coverList.length > 0 && item.id) {
        uni.navigateTo({
            url: '/pages/detailModel/detailModel?item=' + encodeURIComponent(JSON.stringify(item))
        })
    } else {
        uni.showToast({
            title: '当前图片未生成或丢失',
            icon: "error",
            duration: 1000
        })
    }
}

onHide(() => {
    goods.value = []
})
// 触底
onReachBottom(() => {
    pageNo.value++
    getModelList()
})

// 下拉刷新
onPullDownRefresh(() => {
    modelList.value = []
    pageNo.value = 1
    hasMore.value = true

    getModelList()
    getUserInfo()

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 2000)
})


// 登录状态下获取我的模型
if (token.value) {
    getModelList()
    getUserInfo()
}
</script>

<style lang="scss" scoped>
.page {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 56rpx;

        .user {
            display: flex;
            align-items: center;

            .avatar {
                width: 120rpx;
                height: 120rpx;
                background: #ececec;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20rpx;
            }

            .user-btn,
            .user-name {
                display: flex;
                flex-direction: row;
                color: #fff;
                margin-right: 6rpx;
            }

            .info {
                .user-name {
                    height: 28rpx;

                    .user-name-text {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        margin-right: 12rpx;
                        font-size: 32rpx;
                    }

                    .vip {
                        width: 20rpx;
                        height: 18rpx;
                        .vip-icon{
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                }
                .vip-time{
                    font-size: 20rpx;
                    color: #e6e6e6;
                    margin-top: 14rpx;
                }

            }

        }

        .setting,
        .setting-img {
            width: 50rpx;
            height: 50rpx;
        }

    }

    .wallet {
        width: 100%;
        height: 64rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .item {
            display: flex;
            align-items: center;
            margin-right: 20rpx;

            .icon {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 2rpx solid #999999;
                box-sizing: border-box;
                background: #000;
                z-index: 1;

                .yundian {
                    width: 36rpx;
                    height: 28rpx;
                }

                .jifen {
                    height: 36rpx;
                    width: 28rpx;
                }
            }

            .quantity {
                height: 56rpx;
                display: flex;
                align-items: center;
                border: 2rpx solid #999999;
                box-sizing: border-box;
                color: #fff;
                display: flex;
                margin-left: -20rpx;
                padding-left: 30rpx;
                width: 220rpx;
                border-radius: 0 15rpx 15rpx 0;
                font-size: 28rpx;
                font-weight: 700;
            }
        }

        .record,
        .navigator-wrap {
            flex: 1;
            height: 56rpx;
            background: #333333;
            border-radius: 15rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20rpx;
            font-weight: 500;
            color: #999;
        }
    }

    .btn {
        width: 100%;
        height: 72rpx;
        font-size: 24rpx;
        font-weight: 700;
        color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 24rpx auto 80rpx;
    }

    .my {
        width: 100%;

        .title {
            color: #fff;
            font-size: 24rpx;
            font-weight: 500;
            height: 24rpx;
            margin-bottom: 16rpx;
        }

        .container {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .item {
                width: 218rpx;
                height: 164rpx;
                background: #000;

                margin-bottom: 16rpx;
                margin-right: 16rpx;
                overflow: hidden;
                position: relative;


                &:nth-child(3n) {
                    margin-right: 0;
                }

                .item-img {
                    border-top: 4rpx solid #000;
                }

                .tip {
                    background: rgba(3, 0, 0, 0.5);
                    height: 30rpx;
                    line-height: 30rpx;
                    border-radius: 10rpx;
                    padding: 0 14rpx;
                    position: absolute;
                    top: 12rpx;
                    right: 12rpx;
                    font-size: 20rpx;
                    font-weight: 500;
                    color: #fff;
                }

            }

            .more {
                width: 100%;
            }
        }

    }
}
</style>